<template>
    <el-form
        ref="searchFormRef"
        :model="searchForm"
        :rules="searchRules"
        label-width="80px"
        class="demo-ruleForm"
        status-icon>
        <el-row>
            <el-col :span="10">
                <el-form-item label="标题搜索" prop="article_title">
                    <el-input
                        v-model="searchForm.article_title"
                        placeholder="请输入标题或草稿标题进行查找"
                        @change="updateSearchParams" />
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="公众号" prop="official_account_id">
                    <el-select
                        v-model="searchForm.official_account_id"
                        placeholder="请选择公众号"
                        @visible-change="clickSelect"
                        @change="updateSearchParams">
                        <el-option
                            v-for="item in official_accounts"
                            :key="item.id"
                            :label="item.nick_name"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <div style="display: flex; justify-content: flex-end">
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </div>
            </el-col>
        </el-row>
    </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { getOfficeAccountList } from '@/api/channelconfig/officeAccount';

const searchFormRef = ref<FormInstance>();

interface SearchType {
    article_title: string;
    official_account_id: string;
}
const searchForm = reactive<SearchType>({
    article_title: '',
    official_account_id: ''
});

const searchRules = reactive<FormRules>({
    article_title: [{ required: false, message: '请输入标题搜索', trigger: 'blur' }],
    official_account_id: [{ required: false, message: '请选择公众号', trigger: 'blur' }]
});

const official_accounts = reactive<any>([]);

interface Props {
    title: string;
    id: string;
}
const emit = defineEmits(['update:title', 'update:id', 'change']);
const search = () => {
    updateSearchParams();
    emit('change', searchForm);
};

const reset = () => {
    searchForm.article_title = '';
    searchForm.official_account_id = '';
    updateSearchParams();
    emit('change', searchForm);
};

const clickSelect = async () => {
    if (!official_accounts.length) {
        const params = {
            page: 1,
            page_size: 100,
            verify_type_info: 0
        };
        const res = await getOfficeAccountList(params);
        official_accounts.splice(0);
        official_accounts.push(...res.data);
    }
};

const updateSearchParams = () => {
    emit('update:title', searchForm.article_title);
    emit('update:id', searchForm.official_account_id);
};
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 12px;
}

:deep(.el-form-item__content) {
    flex: auto !important;
    width: auto !important;
}
</style>
